<template>
  <div>
    <mynavbar></mynavbar>
    <div class="jftx">
      <div class="left">
        <img
          src="https://yanxuan.nosdn.127.net/c023a63e9f8433cab57c73aff9ab5791.png?quality=75&type=webp&imageView&thumbnail=84x84"
          alt=""
        />
        <div>
          <p>你的积分：0</p>
          <span>查看明细</span>
        </div>
      </div>
      <div class="right">
        <p>积分规则</p>
      </div>
    </div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
          src="https://yanxuan.nosdn.127.net/static-union/165657439481e369.png"
        />
        <h4>赚积分</h4>
        <p>每天都能领积分</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://yanxuan.nosdn.127.net/static-union/1656572285e550c1.png"
        />
        <h4>Pro会员</h4>
        <p>购物享双倍积分</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://yanxuan.nosdn.127.net/static-union/1673415820cd3c31.png"
        />
        <h4>积分抽盲盒</h4>
        <p>100%中奖</p>
      </van-grid-item>
    </van-grid>
    <!-- 积分夺宝  -->
    <div class="duobao">
      <div class="top">
        <h4>积分夺宝</h4>
        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
      </div>
      <div class="bottom">
        <van-card
          price="0"
          title="5元礼品卡"
          thumb="https://yanxuan.nosdn.127.net/static-union/1655870971580c85.png?quality=75&type=webp&imageView&thumbnail=220x220"
        >
          <template #tags>
            <van-tag plain type="danger">人均投注12积分</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">1积分起投</van-button>
          </template>
        </van-card>
      </div>
    </div>
    <!-- 积分兑好礼 -->
    <div class="duihaoli">
      <img
        src="https://yanxuan.nosdn.127.net/e4c60e6c90f757b9e74d01863bd74a82.png"
        alt=""
      />
      <div class="top">
        <div class="text">
          <div class="xiandui">
            <h4>积分惊喜兑</h4>
            <span>每期限兑1件</span>
          </div>
          <p>每周四 10点开抢</p>
        </div>

        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/4333b709fac8932bbf86a48ebb022e34.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>30满减红包</h4>
            <p>9积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/4333b709fac8932bbf86a48ebb022e34.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>19满减红包</h4>
            <p>9积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/4333b709fac8932bbf86a48ebb022e34.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>14满减红包</h4>
            <p>9积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/4333b709fac8932bbf86a48ebb022e34.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>8满减红包</h4>
            <p>9积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/4333b709fac8932bbf86a48ebb022e34.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>5满减红包</h4>
            <p>9积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/e9cd37803adb718f2dc71e2cec4b8500.png?type=webp&imageView&thumbnail=160x160&quality=75"
            />
            <h4>1.00元礼品卡</h4>
            <p>9积分兑</p>
          </van-grid-item>
        </van-grid>
        <!-- 积分对权益 -->
        <div class="quanyi">
          <div class="top">
            <div>
              <h4>积分兑权益</h4>
              <p>每天可兑4件</p>
            </div>
            <button>已兑换权益</button>
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/static-union/1670838371069428.jpg?type=webp&imageView&thumbnail=345x160&quality=75"
            />
            <h4>Pro会员·年卡</h4>
            <p>1490积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/static-union/167083839617b809.jpeg?type=webp&imageView&thumbnail=345x160&quality=75"
            />
            <h4>Pro会员·半年卡</h4>
            <p>799积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/static-union/1669717401586e25.jpg?type=webp&imageView&thumbnail=345x160&quality=75"
            />
            <h4>玉兔相恋付邮免费领</h4>
            <p>68积分兑</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://yanxuan.nosdn.127.net/static-union/16736200247142b8.png?type=webp&imageView&thumbnail=345x160&quality=75"
            />
            <h4>樊登讲书7天VIP</h4>
            <p>5积分兑</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 积分兑好物 -->
    <div class="haowu">
      <img
        src="https://yanxuan.nosdn.127.net/cdd847078a43afbed9e448787586bc8d.png?imageView=&quality=85&thumbnail=750x192"
        alt=""
      />
      <van-tabs>
        <van-tab title="超值兑" name="a">
          <h3>爆款件件0元 限5件/天</h3>

          <div class="pbl">
            <div class="goods">
              <div v-for="(v, index) in arr" :key="index" class="box">
                <img :src="v.img1" />

                <p>{{ v.proname }}</p>
                <span>{{ v.originprice }}积分</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="精选兑" name="b">
          <h3>超低价·超值兑·限1件1场</h3>
          <div class="pbl">
            <div class="goods">
              <div v-for="(v, index) in arr" :key="index" class="box">
                <img :src="v.img1" />

                <p>{{ v.proname }}</p>
                <span>{{ v.originprice }}积分</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="专属兑" name="c">
          <h3>pro会员专属兑</h3>

          <div class="pbl">
            <div class="goods">
              <div v-for="(v, index) in arr" :key="index" class="box">
                <img :src="v.img1" />

                <p>{{ v.proname }}</p>
                <span>{{ v.originprice }}积分</span>
              </div>
            </div>
          </div></van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
import mynavbar from "../item/mynavbar.vue";
export default {
  components: { mynavbar },
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      arr: [],
    };
  },
  mounted() {
    service({
      url: "http://118.178.238.19:3001/api/pro/recommendlist",
      method: "get",
      params: {
        count: 3,
        limitNum: 4,
      },
    }).then((res) => {
      this.arr = res.data.data;
    });
  },
};
</script>

<style scoped>
.jftx {
  width: 100%;
  height: 9.38rem;
  background: url(https://yanxuan.nosdn.127.net/static-union/164724353674ca18.png?imageView=&quality=75&thumbnail=750x0);
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.left img {
  width: 2.625rem;
}
.left {
  display: flex;
  align-items: center;
  height: 9.125rem;
  line-height: 2.625rem;
  margin-left: 1.25rem;
}
span {
  border: 1px solid #fff;
  border-radius: 1.625rem;
  padding: 0.3125rem;
}
.van-image {
  width: 3.25rem;
  height: 3.25rem;
}
.van-grid-item p {
  font-size: 0.75rem;
  color: #debb75;
}
.duobao .top {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(255, 232, 192);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.van-count-down {
  color: red;
}
.van-button--mini {
  background: red;
  color: #fff;
  border-radius: 1.25rem;
}
.duihaoli img {
  width: 100%;
  height: 3.125rem;
}
.duihaoli .xiandui {
  display: flex;
  align-items: center;
}
.duihaoli .xiandui span {
  color: #debb75;
}
.duihaoli .top {
  background: url(https://yanxuan.nosdn.127.net/4bb4ca31614d93bfa2dedb10529ca51a.png?imageView=&quality=85&thumbnail=750x768);
  background-size: 100%, 100%;
}
.duihaoli .top .text {
  margin-left: 3rem;
}
.quanyi .top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.quanyi .top button {
  background: #debb75;
  color: #fff;
  padding: 0.625rem;
  border-radius: 1.25rem;
  border: none;
}
.haowu img {
  width: 100%;
}
.haowu {
  text-align: center;
}
.goods {
  width: 96%;
  column-count: 2;
  margin: auto;
}
.box {
  width: 98%;
  margin: 1% 1%;
  background: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 20px;
}
.box img {
  width: 99%;
  height: 50%;
}
.box span {
  color: #debb75;
}
</style>